<template>
  <el-button v-bind="buttonProps">
    <el-icon v-if="icon && iconPosition === 'left'" :class="iconClass">
      <component :is="icon" />
    </el-icon>
    <span v-if="contentType !== 'icon'">{{ buttonText }}</span>
    <el-icon v-if="icon && iconPosition === 'right'" :class="iconClass">
      <component :is="icon" />
    </el-icon>
  </el-button>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ElButton, ElIcon } from 'element-plus';
import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue';

export default defineComponent({
  name: 'CustomButton',
  components: {
    ElButton,
    ElIcon,
    Edit,
    Share,
    Delete,
    Search,
    Upload,
  },
  props: {
    // 按钮的所有属性
    buttonProps: {
      type: Object as PropType<Record<string, any>>,
      default: () => ({}),
    },
    // 按钮显示的文字
    buttonText: {
      type: String,
      default: '',
    },
    // 按钮显示的图标
    icon: {
      type: [String, Object] as PropType<string | typeof Edit>,
      default: '',
    },
    // 图标位置：left 或 right
    iconPosition: {
      type: String as PropType<'left' | 'right'>,
      default: 'left',
    },
    // 按钮内容类型：text, icon, both
    contentType: {
      type: String as PropType<'text' | 'icon' | 'both'>,
      default: 'text',
    },
    // 图标的额外类名
    iconClass: {
      type: String,
      default: '',
    },
  },
});
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>
